//http://extjs.com/forum/showthread.php?t=18620
FolderGrid = function() {
	var ds;
	var grid;

	function initDataSource() {
		var recordType = Ext.data.Record.create([{name: "id", mapping:"id", type: "string"},
											 {name: "status", mapping:"status", type: "string"},
											 {name: "type", mapping:"type", type: "string"},
											 {name: "sender", mapping:"sender", type: "string"},
											 {name: "subject", mapping:"subject", type: "string"},
											 {name: "date", mapping:"date", type: "string"},
											]);

	 ds = new Ext.data.Store({proxy: new Ext.data.DWRProxy(InboxManager.getMessages),
							  reader: new Ext.data.ListRangeReader(
															{id:'id', totalProperty:'totalSize'}, recordType),
									   			 			remoteSort: true
		  					});

	}

	function buildGrid() {
		 var sm = new Ext.grid.CheckboxSelectionModel();

		grid = new Ext.grid.GridPanel({
									id: 'folderGrid',
									store: ds,
									cm: new Ext.grid.ColumnModel([
															sm,
															{id:'status', header: 'Status', width: 100, sortable: true, dataIndex: 'status'},
										 				    {id:'type', header: 'Type', width: 100, sortable: true, dataIndex: 'type',  renderer: renderType},
														    {id:'sender', header: 'Sender', width: 100, sortable: true, dataIndex: 'sender'},
										      				{id:'subject', header: 'Subject', width: 100, sortable: true, dataIndex: 'subject'},
													      	{id:'date', header: 'Date', width: 100, sortable: true, dataIndex: 'date'}
							    						]),
							    	sm: sm,
							    	renderTo: 'fv.mainView',
									viewConfig: {forceFit:true},
							        bbar: new Ext.PagingToolbar({
            						 								pageSize: 10,
															        store: ds,
						            								displayInfo: true,
						            								displayMsg: 'Displaying messages {0} - {1} of {2}',
														            emptyMsg: "No messages to display",
						            								items:[]
        							}),
							     	stripeRows: true,
							     	enableDragDrop: true,
							    	width: 800,
							    	height: 288,
							    	title:'Inbox'
   								});

	    grid.addListener('rowclick', onRowClick);
	    grid.addListener('rowdblclick', onRowDblClick);

	    grid.getSelectionModel().selectFirstRow();
	}

	 function renderType(value){
	 	var cssClass = 'email';
	 	if (value == 'Mobile MMS') {
	 		cssClass = 'mms'
	 	} else if(value == 'Fax') {
		 	cssClass = 'fax'
	 	}
	 	return String.format("<span class='" + cssClass + "'>" + value + "</span>");
    }

	function onRowClick(grid, rowIndex, event) {
		var selectionModel = grid.getSelectionModel();
	    if ( ! event.shiftKey && ! event.ctrlKey ) { // single row selection
			var row = selectionModel.getSelected();
			if (row) {
				var id = row.id;
				InboxManager.getMessage(id, getMessageCallback);
			}
    	}
	}

	function getMessageCallback(message) {
		Ext.getDom('preview').innerHTML = message;
	}

	function onRowDblClick() {
	}

	return {
		init : function() {
			initDataSource();
			ds.load({params:{start: 0, range: 10, sort: 'date', dir: 'ASC'}, arg:[]});
			buildGrid();
		},
		getGrid : function() {
			return grid;
		},
		reload : function() {
			ds.reload();
		}
	}
};

/**
Try removing sort and dir from the load config and adding a sortInfo config directly
onto your ds definition:

Code:

sortInfo: {field:'date', direction:'ASC'}

Store.load only passes start and range by default, the sortInfo must be specified separately.
This is different from the PagingToolbar, which does handle those for you automatically.
    */